<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
    <style>
        #banner {
            height: 110px;
            width: 335px;
            background-color: rgb(21, 30, 125);
        }
        #biaoti {
            margin-left: 80px;
            font-family: Times, "Times New Roman", Georgia, serif;
            font-size: 35px;
            color: white;
            /* background-color: green; */
        }
        #inPut {
            padding-top: 30px;
            margin-left: 50px;
            /* background-color: blueviolet; */
        }
        #todo {
            border-style: none;
            border-radius: 10px;
            width: 200px;
            height: 25px;
        }
        #add {
            height: 31px;
        }
        .title {
            font-size: 20px;
            
        }
        li {
            width: 200px;
            padding: 10px;
            margin: 5px;
            padding-left: 30px;
            list-style: none;
            background-color: wheat;
        }
        #todocount {
            width: 335px;
            height: 500px;
            background-color: rgb(191, 187, 187);
        }
    </style>
</head>
<body>
    <div id="banner">
        <div id="biaoti">MyToDoList</div>
        <div id="inPut">
            <input id="todo_input" type="text" placeholder="请输入代办事项">
            <button id="add" >添加</button>
        </div>
    </div>
    <div id="container">
        <div id="todocount">
            <ul id="todo_list"></ul>
        </div>
        
    </div>
    <script>
        var input = document.querySelector('#todo_input');//获取相应的元素对象
        var inputList = document.querySelector('#todo_list');
        var butt=document.getElementById("add");

        var todoListData = []; 
        var storageList = localStorage.getItem('list');//获取数据
        if (storageList) {
            todoListData = JSON.parse(storageList);
            todoListData.forEach(function (v) {
                var li = document.createElement('li');
                li.innerText = v.text;
                inputList.appendChild(li);
                });
        }
        butt.addEventListener("click",function(e){//增加事项
            var li = document.createElement('li');
            var inputValue = input.value;
            if (inputValue.trim().length > 0) {
                li.innerText = inputValue;
                inputList.appendChild(li);
                li.appendChild(but);
                todoListData.push({
                    text: inputValue
                });
                localStorage.setItem('list', JSON.stringify(todoListData));
                input.value = '';
            }
        })
        inputList.addEventListener('contextmenu', function (e) {//点击右键删除对应事项
            e.preventDefault();
            var li = e.target;
            li.remove();
            updateTodoList();
        });
        function updateTodoList() {//更新数据
            var todosEl = document.querySelectorAll('li');
            var todos = [];
            todosEl.forEach(function (e) {
                todos.push({
                text: e.innerText
            });
        });
        localStorage.setItem('list', JSON.stringify(todos));
        }
    </script>
</body>
</html>